<template>
  <div class="page-baskets">
    <div>
      <div>OVEN</div>
      <div>Stake and Grill your FryUSD and convert them to
        USDT/USDC/DAI over time
      </div>
    </div>
    <div>
      <a-tabs :default-active-key="curTabId" @change="changeTabs">
        <a-tab-pane v-for="(item,index) in tabList" :key="index+''" :tab="item">
          <div class="item-con" v-if="loadInfo">
            <oven-item :active="stake" :data="curPool.stake"></oven-item>
            <oven-item :active="unstake" :data="curPool.unstake"></oven-item>
          </div>
        </a-tab-pane>
      </a-tabs>

      <div class="btns">
        <a-button  @click="grill">GRILL</a-button>
        <a-button  shape="circle"  @click="checkInfo(true)"><a-icon type="sync" /></a-button>
      </div>
      <div class="p1">
          <span class="p1-item text-center" v-for="(item,index) in curPool.totals">
            <div class="pos-relative">{{item.text}}</div>
            <div class="text-center pos-relative">
              <span>{{item.amount}}</span>
              <span class="icon">
                <img :src="require('../../../assets/icon/'+item.icon+'.png')"/>
              </span>
            </div>
          </span>
      </div>
    </div>
  </div>
</template>


<script>
  import OvenItem from "./components/OvenItem"
  import {trace} from "../../../utils/tools"
  import {mapGetters} from "vuex"
  import {ovenStake, ovenExchange, ovenUnstake, getOvenPoolInfo, approvePoolToken, getPoolAllowance,getTokenAddress} from "cheese-sdk"
  import {getBalanceToken} from "../../../api/user"

  export default {
    components: {OvenItem},
    props: {},
    data() {
      return {
        loadInfo:false,
        curTabId: "0",
        tabList: [
          "USDT",
          "USDC",
          "DAI",
        ],
        pools: {
          USDT: null,
          USDC: null,
          DAI: null,
        },
        curPool: {},
      };
    },
    methods: {
      changeTabs(key) {
        trace("key=", key)
        trace("key=", key)
        this.curTabId = key;
      },
      stake(amount) {
        if (this.curPool.allowance < amount) {
          let fryusd = getTokenAddress("FRIES");
          approvePoolToken(this.curPool.address, fryusd, "oven", (code, hash) => {
            trace("approvePoolToken-", this.curPool.address, code, hash);
            if (code == 1) {
              this.checkInfo(true);
            }
          });
          return
        }
        ovenStake(this.curPool.address, amount, (code, hash) => {
          trace("ovenStake", code, hash);
          if (code == 1) {
            this.checkInfo(true);
          }
        })
      },
      unstake(amount) {
        ovenUnstake(this.curPool.address, amount, (code, hash) => {
          trace("ovenUnstake", code, hash);
          if (code == 1) {
            this.checkInfo(true);
          }
        })
      },
      grill() {
        ovenExchange(this.curPool.address, (code, hash) => {
          trace("ovenExchange", code, hash);
          if (code == 1) {
            this.checkInfo(true);
          }
        })
      },

      async checkInfo(b) {
        if(!this.isLogin) return;
        let id = this.tabList[Number(this.curTabId)];
        let address = getTokenAddress(id);
        let pool = {};
        trace("checkInfo",this.curTabId,id,address)
        if (b) {
          pool = this.pools[id] = (await getOvenPoolInfo(address)).data;
        } else {
          pool = this.pools[id] || (await getOvenPoolInfo(address)).data;
          this.pools[id] = pool;
        }
        pool.address = address;
        let fryusd = getTokenAddress("FRIES");
        pool.allowance = await getPoolAllowance(pool.address, fryusd, "oven");
        pool.balance = await getBalanceToken(fryusd)
        trace("curPool=", pool)
        pool.totals=[
          {
            text:"TOTAL STAKED FRYUSD",
            amount:pool.totalSupplyFriesTokens ,
            icon:"FRIES",
          },
          {
            text:"AVAILABLE TO GRILL",
            amount:pool.buffer,
            icon:id,
          },
          {
            text:"ESTIMATED DAILY YIELD",
            amount:pool.ESTIMATED_DAILY_YIELD,
            icon:id,
          },
        ];
        pool.stake={
          title:"STAKE",
          title1:"FryUSD Balance",
          title2:"Grillable Tokens",
          amount1:pool.balance,
          amount2:pool.depositedAl,
        };
        pool.unstake={
          title:"UNSTAKE",
          title1:"FryUSD Balance",
          title2:"Grillable Tokens",
          amount1:pool.depositedAl,
          amount2:pool.exchangeAmount,
        }
        this.curPool = pool;
        this.loadInfo = true;

      },

    },
    watch: {
      account() {
        if (this.isLogin) {
          this.checkInfo();
        }
      },
      $route(to, from) {
        if (to.path.indexOf("oven") > 0) {
          if (this.isLogin) {
            this.checkInfo();
          }
        }
      },
    },
    computed: {
      ...mapGetters(["isLogin", "account"]),
    },

    mounted() {
      trace("this.isLogin=", this.isLogin)
      if (this.isLogin) {
        this.checkInfo();
      }
    },
  };
</script>
<style lang="less" scoped>
  .page-baskets {
    position: relative;
    width: 1020px;

    .item-con {

      display: flex;
    }

    .btns{
      text-align: center;
      margin: 2rem auto;
      width: 30%;
    }

    .text-center{
      text-align: center;
    }
    .pos-relative{
      position: relative;
    }

    .p1{
      position: relative;
      margin: 2rem auto;
      display: flex;
      justify-content: center;
      align-items: center;

      .p1-item{
        position: relative;
        width: 294px;
        margin: 0 18px;
        background: #F499AD;
        border: 2px solid #1D1D1B;
        -webkit-border-radius: 50% 2rem;
        -moz-border-radius: 50% 2rem;
        border-radius: 50% 2rem;

      }

      .icon{
        width: 40px;
        height: 40px;
        display: inline-block;
        margin-left: 12px;

        img{
          width: 100%;
        }
      }
    }

    .p1-item:before{
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      left: -10px;
      top: 10px;
      background: #F68B38;
      border: 2px solid #000000;
    }

  }

</style>
